<template>
  <sl-container>
    <div
      slot="left"
      :class="[isCollapse ? 'aside aside-mini' : 'aside']"
    >
      <div class="logo">
        <img src="../../assets/logo.png">
      </div>
      <sl-navigator
        class=""
        :inject-data="navigatorData"
        :collapse="isCollapse"
        @click="handleClick"
      ></sl-navigator>
    </div>
    <div slot="top" class="header">
      <sl-header>
        <div
          :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold' , 'icon']"
          @click="changeCollapse"
        ></div>
        <span class="el-icon-setting userEdit" @click="exit"></span>
        <coundDown :isH5="false"/>
      </sl-header>
    </div>
    <div slot="right" class="home-right">
      <router-view></router-view>
    </div>
  </sl-container>
</template>

<script>
import NavData from '@/mock/navigator.data.json'
import coundDown from '@/views/countDown/index.vue'

export default {
  data () {
    return {
      navigatorData: NavData.navigator,
      isCollapse: false
    }
  },
  components: {
    coundDown
  },
  methods: {
    handleClick (params) {
      this.$router.push({path: params.route})
    },
    changeCollapse () {
      this.isCollapse = !this.isCollapse;
    },
    exit() {
      this.$confirm('是否退出当前系统？', '登出', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '已登出'
            });

            this.$router.push({path: '/login'})
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message:'取消登出'
            })
          });
    }
  }
}
</script>